<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>客服中心</title>
    <meta name="description" content="网站描述" />
    <meta name="keywords" content="关键词" />
    <link rel="stylesheet" href="./style/reset.css">
    <link rel="stylesheet" href="./style/style.css">
    <link rel="stylesheet" href="./style/flickerplate.css">
</head>
<body>
    <!-- 头部导航 -->
    <div class="wrap_header">
        <div class="head_box">
            <div class="head_navigator">
                <a class="nav_item" href="./index.html">首页</a>
                <a class="nav_item" href="./news.html">新闻中心</a>
                <a class="nav_item" href="">企业资讯</a>
                <a class="nav_item on" href="">客服中心</a>
                <a class="nav_item" href="">招聘中心</a>
                <a class="nav_search" href=""><i class="icon_search"></i>查询/申请</a>
            </div>
            <h1 class="logo"><img src="./images/logo.png"/><span class="title">苏州奇才充电桩</span></h1>
        </div>
    </div>

    <div class="wrap_main common_main">

        <!-- 个人信息 -->
        <div class="service_user">
            <div class="user_avatar">
                <img class="avatar" src="./images/avatar.png"/>
                <label class="level"><i class="vip"></i><i class="level_num">3</i></label>
            </div>
            <p class="phone">1354856456</p>
            <a href="javascript:void(0);" class="btn_out">退出登录</a>
        </div>


        <div class="statist_box">
            <div class="box_head">
                <h2 class="title">统计图表</h2>
                <i class="line"></i>
                <p class="desc">Statistical charts</p>
            </div>

            <div class="statist_filter">
                <div class="filter_item">
                    <select id="select_year" rel="2018"></select>
                </div>
                <div class="filter_item">
                    <select id="select_month" rel="08"></select>
                </div>
                <div class="filter_item">
                    <select id="select_day" rel=""></select>
                </div>
            </div>
            <div id="echarts"></div>
        </div>

        <div class="record_box">
            <div class="box_head">
                <h2 class="title">交易记录</h2>
                <p class="desc">Transaction records</p>
            </div>
            <div class="record_table">
                <div class="trade_filter">
                    <select name="trade" id="trade">
                        <option value="1">全部</option>
                        <option value="2">余额充值</option>
                        <option value="3">充电金额</option>
                        <option value="4">余额退款</option>
                    </select>
                </div>

                <div class="tr_head">2018-08</div>
                <ul>
                    <li class="trade_item">
                        <span class="staff">通江南站 01桩 01枪</span>
                        <span class="staff">08-26  09：20：01</span>
                        <span class="staff">- 200.00</span>
                    </li>
                    <li class="trade_item">
                        <span class="staff">余额充值（单号125362112）</span>
                        <span class="staff">08-26  09：20：01</span>
                        <span class="staff active">+200.00</span>
                    </li>
                    <li class="trade_item">
                        <span class="staff">微信退款（单号123362535）</span>
                        <span class="staff">08-26  09：20：01</span>
                        <span class="staff">- 200.00</span>
                    </li>
                    <li class="trade_item">
                        <span class="staff">余额充值（单号125362112）</span>
                        <span class="staff">08-26  09：20：01</span>
                        <span class="staff active">+200.00</span>
                    </li>
                    <li class="trade_item">
                        <span class="staff">微信退款（单号123362535）</span>
                        <span class="staff">08-26  09：20：01</span>
                        <span class="staff">- 200.00</span>
                    </li>
                </ul>

                <div class="tr_head">2018-07</div>
                <ul>
                    <li class="trade_item">
                        <span class="staff">通江南站 01桩 01枪</span>
                        <span class="staff">08-26  09：20：01</span>
                        <span class="staff">- 200.00</span>
                    </li>
                    <li class="trade_item">
                        <span class="staff">余额充值（单号125362112）</span>
                        <span class="staff">08-26  09：20：01</span>
                        <span class="staff active">+200.00</span>
                    </li>
                    <li class="trade_item">
                        <span class="staff">微信退款（单号123362535）</span>
                        <span class="staff">08-26  09：20：01</span>
                        <span class="staff">- 200.00</span>
                    </li>
                    <li class="trade_item">
                        <span class="staff">余额充值（单号125362112）</span>
                        <span class="staff">08-26  09：20：01</span>
                        <span class="staff active">+200.00</span>
                    </li>
                    <li class="trade_item">
                        <span class="staff">微信退款（单号123362535）</span>
                        <span class="staff">08-26  09：20：01</span>
                        <span class="staff">- 200.00</span>
                    </li>
                    <li class="trade_item">
                        <span class="staff">余额充值（单号125362112）</span>
                        <span class="staff">08-26  09：20：01</span>
                        <span class="staff active">+200.00</span>
                    </li>
                    <li class="trade_item">
                        <span class="staff">微信退款（单号123362535）</span>
                        <span class="staff">08-26  09：20：01</span>
                        <span class="staff">- 200.00</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="record_box">
            <div class="box_head">
                <h2 class="title">充电记录</h2>
                <p class="desc">Recharge record</p>
            </div>
            <div class="record_table">
                <ul>
                    <li class="recharge_item">
                        <span class="staff">订单号</span>
                        <span class="staff">充电设备</span>
                        <span class="staff">车辆类型</span>
                        <span class="staff">充电时间</span>
                        <span class="staff">充电电量</span>
                        <span class="staff">充电金额</span>
                        <span class="staff">联系客服</span>
                    </li>

                    <li class="recharge_item">
                        <span class="staff">2018102200322</span>
                        <span class="staff">B站A_001桩01枪</span>
                        <span class="staff">小型车</span>
                        <span class="staff">08:20:09-10:20:09</span>
                        <span class="staff">8度</span>
                        <span class="staff">50.00元</span>
                        <span class="staff">400-123-6589</span>
                    </li>
                    <li class="recharge_item">
                        <span class="staff">2018102200322</span>
                        <span class="staff">B站A_001桩01枪</span>
                        <span class="staff">小型车</span>
                        <span class="staff">08:20:09-10:20:09</span>
                        <span class="staff">8度</span>
                        <span class="staff">50.00元</span>
                        <span class="staff">400-123-6589</span>
                    </li>
                    <li class="recharge_item">
                        <span class="staff">2018102200322</span>
                        <span class="staff">B站A_001桩01枪</span>
                        <span class="staff">小型车</span>
                        <span class="staff">08:20:09-10:20:09</span>
                        <span class="staff">8度</span>
                        <span class="staff">50.00元</span>
                        <span class="staff">400-123-6589</span>
                    </li>
                    <li class="recharge_item">
                        <span class="staff">2018102200322</span>
                        <span class="staff">B站A_001桩01枪</span>
                        <span class="staff">小型车</span>
                        <span class="staff">08:20:09-10:20:09</span>
                        <span class="staff">8度</span>
                        <span class="staff">50.00元</span>
                        <span class="staff">400-123-6589</span>
                    </li>
                    <li class="recharge_item">
                        <span class="staff">2018102200322</span>
                        <span class="staff">B站A_001桩01枪</span>
                        <span class="staff">小型车</span>
                        <span class="staff">08:20:09-10:20:09</span>
                        <span class="staff">8度</span>
                        <span class="staff">50.00元</span>
                        <span class="staff">400-123-6589</span>
                    </li>
                    <li class="recharge_item">
                        <span class="staff">2018102200322</span>
                        <span class="staff">B站A_001桩01枪</span>
                        <span class="staff">小型车</span>
                        <span class="staff">08:20:09-10:20:09</span>
                        <span class="staff">8度</span>
                        <span class="staff">50.00元</span>
                        <span class="staff">400-123-6589</span>
                    </li>
                    <li class="recharge_item">
                        <span class="staff">2018102200322</span>
                        <span class="staff">B站A_001桩01枪</span>
                        <span class="staff">小型车</span>
                        <span class="staff">08:20:09-10:20:09</span>
                        <span class="staff">8度</span>
                        <span class="staff">50.00元</span>
                        <span class="staff">400-123-6589</span>
                    </li>
                    <li class="recharge_item">
                        <span class="staff">2018102200322</span>
                        <span class="staff">B站A_001桩01枪</span>
                        <span class="staff">小型车</span>
                        <span class="staff">08:20:09-10:20:09</span>
                        <span class="staff">8度</span>
                        <span class="staff">50.00元</span>
                        <span class="staff">400-123-6589</span>
                    </li>
                    <li class="recharge_item">
                        <span class="staff">2018102200322</span>
                        <span class="staff">B站A_001桩01枪</span>
                        <span class="staff">小型车</span>
                        <span class="staff">08:20:09-10:20:09</span>
                        <span class="staff">8度</span>
                        <span class="staff">50.00元</span>
                        <span class="staff">400-123-6589</span>
                    </li>
                    <li class="recharge_item">
                        <span class="staff">2018102200322</span>
                        <span class="staff">B站A_001桩01枪</span>
                        <span class="staff">小型车</span>
                        <span class="staff">08:20:09-10:20:09</span>
                        <span class="staff">8度</span>
                        <span class="staff">50.00元</span>
                        <span class="staff">400-123-6589</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="record_box">
            <div class="box_head">
                <h2 class="title">我要咨询</h2>
                <p class="desc">I want to consulting</p>
            </div>
            <div class="record_table">
                <ul>
                    <li class="consult_item">
                        <img class="avatar" src="./images/avatar.png"/>
                        <div class="info">
                            <h3 class="name">13584755986</h3>
                            <p class="time">2018-09-12 10:20:20</p>
                            <div class="desc">咨询问题内容咨询问题内容咨询问题内容咨询问题内容咨询问题内容咨询问题内容咨询问题内容咨询问题内容咨询问题内容</div>
                            <div class="info_pics">
                                <img class="consult_pic" src="./images/product_01.jpg"/>
                                <img class="consult_pic" src="./images/product_01.jpg"/>
                                <img class="consult_pic" src="./images/product_01.jpg"/>
                                <img class="consult_pic" src="./images/product_01.jpg"/>
                            </div>
                        </div>
                        <div class="reply_item">
                            <img class="avatar" src="./images/kefu.jpg"/>
                            <div class="info">
                                <h3 class="name">13584755986</h3>
                                <p class="time">2018-09-12 10:20:20</p>
                                <div class="desc">咨询问题内容咨询问题内容咨询问题内容咨询问题内容咨询问题内容咨询问题内容咨询问题内容咨询问题内容咨询问题内容</div>
                            </div>
                        </div>
                    </li>
                    <li class="consult_item">
                        <img class="avatar" src="./images/avatar.png"/>
                        <div class="info">
                            <h3 class="name">13584755986</h3>
                            <p class="time">2018-09-12 10:20:20</p>
                            <div class="desc">咨询问题内容咨询问题内容咨询问题内容咨询问题内容咨询问题内容咨询问题内容咨询问题内容咨询问题内容咨询问题内容</div>
                            <div class="info_pics">
                                <img class="consult_pic" src="./images/product_01.jpg"/>
                                <img class="consult_pic" src="./images/product_01.jpg"/>
                                <img class="consult_pic" src="./images/product_01.jpg"/>
                                <img class="consult_pic" src="./images/product_01.jpg"/>
                            </div>
                        </div>
                        <div class="reply_item">
                            <img class="avatar" src="./images/kefu.jpg"/>
                            <div class="info">
                                <h3 class="name">13584755986</h3>
                                <p class="time">2018-09-12 10:20:20</p>
                                <div class="desc">咨询问题内容咨询问题内容咨询问题内容咨询问题内容咨询问题内容咨询问题内容咨询问题内容咨询问题内容咨询问题内容</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <form action="">
            <div class="upload_file">
                <p class="upload_name">发送附件/图片</p>
                <input class="file" type="hidden" name="file"/>
            </div>
            <div class="upload_pics">
                <img class="pic_item" src="./images/product_01.jpg"/>
                <img class="pic_item" src="./images/product_01.jpg"/>
                <img class="pic_item" src="./images/product_01.jpg"/>
                <img class="pic_item" src="./images/product_01.jpg"/>
            </div>
            <div class="form_content">
                <a href="javascript:void(0);" class="btn_submit">发送</a>
                <div class="form_put">
                    <input type="text" name="content" placeholder="请输入要咨询的问题">
                </div>
            </div>
        </form>
        

    </div>

    <div class="wrap_footer">
        <div class="footer_main clearfix">
            <div class="footer_code">
                <img src="./images/code.png">
                <p class="tip">扫码下载APP，优惠多多</p>
            </div>
            <div class="footer_info">
                <p>苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语</p>
                <p>苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语</p>
            </div>
        </div>
        <p class="website_info">Copyringht 2018苏州充电桩 ｜<span>All rights reserved</span><span>ICP备：CZ0001234567</span></p>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/filter_date.js"></script>
    <script src="./js/echarts.common.min.js"></script>
    <script src="./js/jquery.nicescroll.js"></script>
    <script>
        //日期选择
        $.ms_DatePicker({
            YearSelector: "#select_year",
            MonthSelector: "#select_month",
            DaySelector: "#select_day"
        });

        $('.filter_item select').change(function(){
            var newYear=$('#select_year').val();
            var newMonth=$('#select_month').val();
            var newDay=$('#select_day').val();
            if(newYear==0){
                $('#select_month').val(0);
            }
        })

        //统计图
        var myChart = echarts.init(document.getElementById('echarts'));
        var colors=['#2ab0e1','#8ace28','#f98f04','#1375d9','#0eddaf'];
        // 饼图数据
        var data=[
                    {value:1500.00, name:'余额充值'},
                    {value:1000.00, name:'充电金额'},
                    {value:1600.00, name:'余额退款'},
                ]
        option = {
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : ￥{c}元 ({d}%)",
            },
            color:colors,
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '50%'],
                    label: {
                        normal: {
                            formatter: '{a|￥{c}元}\n{b|{b}}',
                            padding: [0, 0],
                            rich: {
                                a: {
                                    fontSize: 14,
                                    lineHeight: 20
                                },
                                b: {
                                    fontSize: 12,
                                    lineHeight: 20,
                                }
                            }
                        }
                    },
                    data:data,
                    itemStyle: {
                        normal: {
                            borderWidth: 3,
                            borderColor: '#fff',
                        }
                    }
                }
            ]
        };
        
        // 添加数据之后 初始化设置
        myChart.setOption(option);
        
        //超出高度滚动
        $('.record_table').niceScroll({
            cursorcolor: "#ccc",
            cursoropacitymax: 1, 
            touchbehavior: false, 
            cursorborder: "0", 
            cursorborderradius: "5px",
            autohidemode: true
        });


    </script>     
</body>
</html>